

// 1. 定义 (路由) 组件。
// 可以从其他文件 import 进来
const Operate = { template: `

        <div>

        
<mt-header  :title="'第'+room+'-'+area+'区执行操作'" >
 
</mt-header>
         <div v-for = "(item, i) in data.cabinets.item">
            <div v-if="i != data.cabinets.fix">
                <mt-cell value="打开柜体 " :title="'第'+(i+1) + '排'"> <mt-button size="small" icon="success"  type="primary" @click="open(i)"> 打开</mt-button></mt-cell>
            </div> 
         </div>
        
        <p> 
            <mt-cell title="关闭柜体 " > <mt-button size="small" icon="success"  type="primary" @click="execute('close')"> 执行</mt-button></mt-cell>
            <mt-cell title="开始通风 " > <mt-button size="small" icon="success"  type="primary" @click="execute('ventilate')"> 执行</mt-button></mt-cell>
            <mt-cell title="执行停止 " > <mt-button size="small" icon="success"  type="primary" @click="execute('stop')"> 执行</mt-button></mt-cell>
        </p> 
      
        </div>
`,

  data: function () {
        return {
            area:this.$route.params.area,
            room:this.$route.params.room,
            data:value,
        }
    },
    created () {
    
       this.$parent.bar_show = true;
       this.fetchData()
    },
    watch: {
        // 如果路由有变化，会再次执行该方法
        '$route': 'fetchData'
    },
  methods:
  {
    test(){
        alert(1);
    },
    open(i){
        const index = this.data.cabinets.item[i].index;
        const area = this.data.cabinets.item[i].area;
        alert("/geek/"+this.room+"/"+this.area+"/open?area="+area+"&column=" +index)
        Vue.$indicator.open();
        axios.get("/geek/"+this.room+"/"+this.area+"/open?area="+area+"&column=" +index,
        {
        }).then(function(res){
            
            Vue.$indicator.close();
          
           // self.data = res.data;
            
        }).catch(function (error) {
            Vue.$indicator.close();
            alert(error);
        });
    },
    execute(action)
    {
        Vue.$indicator.open();
        axios.get("/geek/"+this.room+"/"+this.area+"/"+action,
        {
        }).then(function(res){
            console.log(JSON.stringify(res.data));
            Vue.$indicator.close();
        }).catch(function (error) {
            console.log(error);
            Vue.$indicator.close();
        });
    }, 
  

    fetchData () {
        var self = this;
        axios.get("/geek/"+this.room+"/"+this.area+"/setupTable",
        {
        }).then(function(res){
            
         //  alert(res.data);
            self.data = res.data;
            
        }).catch(function (error) {
            alert(error);
        });
    },

   
  },

}